<template>
  <view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<text class="login">登录</text>
		</view>
		<view class="flexJcacfdc title-box" style="position: relative;">
			<image class="logo" :src="baseImgUrl + 'img_login_logo.png'" alt="" srcset="" />
			<text class="title">衷依健康服务</text>
		</view>
		
		<view class="login-form-content">
			<view class="action-btn">
        <button
          class="login-btn cu-btn block bg-blue lg round"
          :style="{ color: isAgree ? '#FFF' : '#000', opacity: isAgree ? 1 : .5 }"
          open-type="getPhoneNumber"
          @click="clickLogin"
          @getphonenumber="getPhoneNumber"
          bindgetphonenumber="getPhoneNumber"
					  :disabled="!isAgree"
        >一键登录</button>
			</view>
			<view class="bottom-condition">
				<uni-icons
          v-if="isAgree"
          type="checkbox-filled"
          color="#c27e15"
          size="18"
          @click="isAgree = false"
        ></uni-icons>
				<uni-icons
          v-else
          type="circle"
          color="#9e9e9e"
          size="18"
          @click="isAgree = true"
        ></uni-icons>
				<view class="content">
					我已经阅读同意
					<text style="color: #C27E15;">《衷依健康服务隐私权政策》</text>
					及<text style="color: #C27E15;">《衷依健康服务会员协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import { getCodeImg, loginInto } from '@/api/login'
  import pageConfig from '@/config'
  
  export default {
    data() {
      return {
        baseImgUrl: pageConfig.baseImgUrl,
        codeUrl: "",
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ''
        },
        isAgree: false
      }
    },
    created() {
      // this.getCode()
    },
    methods: {
      toPath(status) {
        if (status) {
          uni.navigateTo({
            url:'/pages/shopp/shoppingCar'
          })
        } else {
          uni.navigateTo({
            url:'/subPage1/cheche/index'
          })
        }
      },
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo('/subPages/commonPage/register')
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      clickLogin() {
        if (!this.isAgree) {
          uni.showToast({
            title: '请选勾选阅读隐私政策和会员协议',
            icon: 'none',
            mask: true
          })
          return
        }
      },
      getPhoneNumber(e) {
        if (!this.isAgree) return
        if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
          // 授权成功，获取encryptedData和iv
          const encryptedData = e.mp.detail.encryptedData
          const iv = e.mp.detail.iv
          uni.login({
            provider: 'weixin',
            success: function (loginRes) {
              if (loginRes.code) {
                const params = {
                  code: loginRes.code,
                  phoneCode: e.detail.code
                }
                loginInto(params).then(res => {
                  if(res.code === 200) {
                    uni.setStorageSync('App-Token', res.token)
                    uni.switchTab({
                      url: '/pages/index'
                    })
                  }
              })
              } else {
                // console.log('登录失败！' + loginRes.errMsg)
              }
            }
          })
        } else {
          // 用户拒绝授权
          console.log('用户拒绝授权')
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      },
      cancelLogin() {
        
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  
  .normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;
      .login {
        font-size: 38rpx;
        font-weight: bold;
        color: #333333;
        line-height: 45rpx;
      }
		}
		.title-box {
			.title {
				position: absolute;
				bottom: 65rpx;
				height: 68rpx;
				font-size: 45rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				line-height: 53rpx;
				letter-spacing: 1px;
			}
		}
		.login-form-content {
			text-align: center;
			margin: 0rpx 60rpx;
      transform: translateY(60rpx);
			// width: 80%;
			.remember{
				margin-top:38rpx ;
				.updatePassword{
					color: #606266;
					font-size: 15px;
					line-height: 15px;
				}
			}
			.login-btn {
				margin-top: 40px;
				height: 45px;
				background: #C27E15;
			}
			.codeClass{
				width: 189rpx;
				height: 69rpx;
				line-height: 69rpx;
				border-radius: 11rpx;
				opacity: 1;
				border: 1rpx solid #C27E15;
				font-size: 35rpx;
				font-weight: 400;
				color: #C27E15;
			}
		}
	}
  ::v-deep.u-radio-group{
		justify-content: space-around;
		flex:0 1 auto !important;
	}
	.bottom-condition{
		display: flex;
    align-items: flex-start;
		margin-top: 45rpx;
    .content {
    }
	}

</style>
